<template>
<!-- 综采底部导航nav -->
  <div class="resourcecontrol">
    <div
      v-for="(item, index) in pumpMapList"
      :key="index"
      :class="{'resource': true, active: currentItem === item.id }"
      @click="handleResourceClick(item)"
    >
      <span class="name">{{ item.value }}</span>
    </div>
  </div>
</template>

<script>
import { pumpMapList } from './titles';
export default {
  props: {
    currentItem: String
  },
  data() {
    return {
      pumpMapList: []
    };
  },
  watch: {
  },
  mounted() {
    this.handleResourceClick({ id: this.currentItem });
    this.pumpMapList = pumpMapList;
  },
  methods: {
    handleResourceClick(val) {
      const { id } = val;
      const sceneName = pumpMapList.find(item => id === item.id).sceneName;
      this.$router.push({ name: 'miningDetails', params: { id }});
      this.$store.dispatch('postToEngine', { 'sceneName': 'SelectZNZC', data: { 'ScenceName': sceneName }});
    }
  }
};
</script>

<style lang="scss" scoped>
.resourcecontrol{
  position: fixed;
  left: 50%;
  bottom: 7.8125rem;
  z-index: 10;
  transform: translateX(-50%);
  font-size: .875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.875rem;
  width: 16.375rem;
  height: 3.125rem;
  background-color: rgba($color: $black, $alpha: 0.4);
  .resource{
    color: $light2Grey;
    cursor: pointer;
    &.active{
      .name{
        color: $cyan;
      }
    }
  }
}
</style>
